<template>
  <div>
    <el-tabs style="width: 90%; margin: 0 auto" v-model="active">
      <el-tab-pane
        label="政府推荐函"
        name="recommend"
        v-if="+relatedData.is_history !== 1 && +relatedData.submit_type === 1"
      >
        <recommend-file :related-data="relatedData"></recommend-file>
      </el-tab-pane>
      <el-tab-pane label="放款审批表" :name="`register-${relatedData.is_history}`">
        <loan-approve-view :query-id="queryId" view-mode></loan-approve-view>
      </el-tab-pane>
      <el-tab-pane
        label="担保意向函"
        name="letter"
        v-if="+relatedData.is_history !== 1 && +relatedData.ele_letter_status > 0"
      >
        <letter-view :query-id="queryId"></letter-view>
      </el-tab-pane>
      <el-tab-pane label="放款通知书" name="notice" v-if="+relatedData.is_history !== 1">
        <loan-notice :query-id="queryId"></loan-notice>
      </el-tab-pane>
      <el-tab-pane label="图片附件">
        <div v-if="imgList.length < 1" class="p-5 text-center text-muted border rounded bg-light">
          没有附件
        </div>
        <ul class="list-inline" v-loading="loading">
          <li class="attach-item" v-for="(item, index) of imgList" :key="index">
            <div class="img-wrap">
              <img class="attach-item-img" @click="handlePreview(index)" :src="item.image" />
              <div class="attach-type badge-primary" :title="item.type">{{ item.type }}</div>
            </div>
            <div class="text-center">{{ item.time || '-' }}</div>
          </li>
        </ul>
      </el-tab-pane>
      <el-tab-pane label="文档附件">
        <div v-if="fileList.length < 1" class="p-5 text-center text-muted border rounded bg-light">
          没有附件
        </div>
        <div v-for="(item, index) in fileList" class="mt-2" :key="index">
          <a :href="item.image" target="_blank" download="download">
            {{ item.image.replace(/(.*\/)*(.*)$/, '$2') }}
          </a>
        </div>
      </el-tab-pane>
      <el-tab-pane label="视频附件">
        <div v-if="videoList.length < 1" class="p-5 text-center text-muted border rounded bg-light">
          没有附件
        </div>

        <div class="d-flex flex-wrap">
          <div v-for="item in videoList" class="my-2 mr-2 attach-item" :key="item.id">
            <div
              class="card cursor-pointer video-card img-wrap"
              @click="playVideo(item.image, item.labelKey)"
            >
              <div v-if="!isZip(item.image)" title="点击播放">
                <video height="150" :src="item.image" width="150"></video>
              </div>
              <div v-else title="点击下载" class="text-center zip-default">
                <i class="fa fa-file-archive-o"></i>
              </div>
              <div class="attach-type badge-primary" :title="item.type">{{ item.type }}</div>
            </div>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
    <el-dialog :visible.sync="videVisible" :title="videoTitle" append-to-body>
      <video
        height="350"
        ref="videoPlay"
        class="w-100 border-0"
        controls
        autoplay="autoplay"
        preload="none"
      >
        <source :src="videoSrc" type="video/mp4" />

        <source :src="videoSrc" type="video/webm" />

        <object
          id="flowplayer"
          width="400"
          height="300"
          data="flowplayer-3.2.18.swf"
          type="application/x-shockwave-flash"
        >
          <param name="movie" value="flowplayer-3.2.18.swf" />

          <param name="flashvars" :value="`config={&quot;clip&quot;:${videoSrc}}`" />
        </object>
      </video>
    </el-dialog>
  </div>
</template>
<script>
import { arrayFromString } from '@vimi/utils-tool'
import RecommendFile from '@/credit/views/city/program/RecommendFile'
import LoanApproveView from '@/credit/views/county/unionProvince/components/loanApproveDeploy/Main'
import LetterView from '@/credit/views/county/unionProvince/components/LetterView'
import LoanNotice from '@/credit/views/county/unionProvince/components/LoanNotice'
export default {
  components: {
    RecommendFile,
    LoanApproveView,
    LetterView,
    LoanNotice,
  },
  props: {
    relatedData: Object,
    visible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      active: 'recommend',
      loading: false,
      imgList: [],
      fileList: [],
      videoList: [],
      videVisible: false,
      videoSrc: '',
      zipType: ['zip', 'rar', 'gzip'],
      videoTitle: '',
    }
  },
  computed: {
    queryId() {
      return this.relatedData.customer_related_id
    },
    images() {
      return this.imgList.map(item => {
        return { src: item.image, title: item.type }
      })
    },
  },
  watch: {
    visible() {
      if (this.visible) {
        this.getData()
      }
    },
    relatedData: {
      handler: function () {
        if (+this.relatedData.is_history !== 1 && +this.relatedData.submit_type === 1) {
          this.active = 'recommend'
        } else {
          this.active = `register-${this.relatedData.is_history}`
        }
      },
      immediate: true,
      deep: true,
    },
  },
  created() {
    this.getData()
  },
  methods: {
    isZip(src) {
      for (let p of this.zipType) {
        if (src.includes(p)) {
          return true
        }
      }
      return false
    },
    playVideo(src, title) {
      if (this.isZip(src)) {
        window.location.href = src
        return
      }
      this.videoTitle = title
      this.videoSrc = src
      this.videVisible = true
      this.$nextTick(() => {
        this.$refs.videoPlay.load()
      })
    },
    async getData() {
      if (!this.queryId) {
        return
      }

      this.loading = true
      const [res] = await this.$utils.promise(
        this.$api.getData(
          'credit',
          'datum_customer_attachment',
          {
            'customer_related_id.eq': this.queryId,
          },
          { create_time: 'desc' }
        )
      )
      this.loading = false

      const imgList = []
      this.fileList = []
      this.videoList = []
      const data = (res && res.data) || []
      for (const item of data) {
        const images = arrayFromString(item.attachment)
        const time = this.$utils.dateFormat(item.create_time, 'yyyy.MM.dd')
        const type = item.attachment_type
        if (+item.file_type === 2) {
          this.fileList.push.apply(
            this.fileList,
            images.map(image => {
              return { image, time, type }
            })
          )
        } else if (+item.file_type === 3) {
          this.videoList.push.apply(
            this.videoList,
            images.map(image => {
              return { image, time, type }
            })
          )
        } else {
          imgList.push.apply(
            imgList,
            images.map(image => {
              return { image, time, type }
            })
          )
        }
      }
      this.imgList = imgList
    },
    handlePreview(index) {
      this.$utils.viewer({
        images: this.images,
        index,
      })
    },
  },
}
</script>

<style scoped lang="scss">
.attach-item {
  display: inline-block;
  vertical-align: top;
  margin-right: 5px;
  margin-bottom: 5px;
}
.img-wrap {
  overflow: hidden;
  position: relative;
  width: 148px;
  height: 148px;
  border-radius: 4px;
  border: 1px solid #c0ccda;
  padding: 2px;

  &:hover {
    border-color: var(--primary);
  }

  .attach-item-img {
    width: 100%;
    height: 100%;
    border-radius: 2px;
    z-index: 1;
    cursor: pointer;
  }

  .attach-type {
    position: absolute;
    top: 5px;
    left: 5px;
    border-radius: 1rem;
    padding: 0.25rem 0.85rem;
    box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.4);
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    z-index: 2000;
  }
}
.video-card {
  border: 1px solid $border-color;
  &:hover {
    border-color: $primary;
  }
}
.zip-default {
  line-height: 150px;
  font-size: 50px;
}
</style>
